<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-focus>
        <input type="text" v-focus="false">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 注册全局的自定义指令 v-focus

        // 指令的配置项中就是提供了一系列的钩子hook函数
        Vue.directive("focus",{
            bind(el){ // 指令初次绑定到dom元素上 （编译模板的阶段）， 初始化的操作
                console.log("绑定");
                console.log(el);
                el.focus(); // 无效因为bind钩子函数中， el元素（input）还没有真正的被添加到html页面上
            },
            inserted(el,binding){ // 指令对应的dom元素插入到 父节点 （编译结束，然后挂载到页面上时）
                console.log(binding);
                console.log("插入");
                // console.log(el);
                const {value} = binding
                // el.focus();//这是一个聚焦的方法

                if(value){
                    el.focus();//这是一个聚焦的方法
                }
               
            }

        })
        var vm = new Vue({
            el: "#app",
            data: {

            }
        })
    </script>
</body>
</html>